import 'package:flutter/material.dart';

import 'package:get/get.dart';
import 'package:getwidget/colors/gf_color.dart';
import 'package:getwidget/components/dropdown/gf_multiselect.dart';
import 'package:getwidget/types/gf_checkbox_type.dart';

import '../controllers/gfmultiselect_controller.dart';

class GfmultiselectView extends GetView<GfmultiselectController> {
  List dropList = [
    '关羽',
    '张飞',
    '赵云',
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('多选框'),
        centerTitle: true,
      ),
      body: Container(
        margin: EdgeInsets.all(10),
        child: ListView(
          children: [
            GFMultiSelect(
              items: dropList,
              onSelect: (value) {
                print('selected $value ');
              },
              dropdownTitleTileText: '云长, 翼德, 子龙',
              dropdownTitleTileMargin: EdgeInsets.only(
                top: 22, 
                left: 0, 
                right: 0, 
                bottom: 1
              ),
              dropdownTitleTilePadding: EdgeInsets.all(10),
              dropdownUnderlineBorder:
              const BorderSide(color: Colors.transparent, width: 2),
              dropdownTitleTileBorder:
              Border.all(color: Colors.grey.shade200, width: 1),
              dropdownTitleTileBorderRadius: BorderRadius.circular(5),
              expandedIcon: const Icon(
                Icons.keyboard_arrow_down,
                color: Colors.black54,
              ),
              collapsedIcon: const Icon(
                Icons.keyboard_arrow_up,
                color: Colors.black54,
              ),
              submitButton: Text('确定'),
              cancelButton: Text('取消'),
              dropdownTitleTileTextStyle:
              const TextStyle(fontSize: 14, color: Colors.black54),
              padding: const EdgeInsets.all(1),
              margin: const EdgeInsets.all(6),
              type: GFCheckboxType.circle,
              activeBgColor: GFColors.SUCCESS,
              activeBorderColor: GFColors.SUCCESS,
              inactiveBorderColor: Colors.grey.shade300,
              inactiveBgColor: Colors.grey.shade200,
            ),

            Divider(),

            Container(
              child: GFMultiSelect(
                items: dropList,
                onSelect: (value) {
                  print('selected $value ');
                },
                dropdownTitleTileText: '云长, 翼德, 子龙',
                dropdownTitleTileColor: Colors.grey[200],
                dropdownTitleTileMargin: EdgeInsets.only(
                  top: 22, 
                  left: 0, 
                  right: 0, 
                  bottom: 0
                ),
                dropdownTitleTilePadding: EdgeInsets.all(10),
                dropdownUnderlineBorder: const BorderSide(
                  color: Colors.transparent, width: 2),
                dropdownTitleTileBorder:
                Border.all(color: Colors.grey.shade300, width: 1),
                dropdownTitleTileBorderRadius: BorderRadius.circular(5),
                expandedIcon: const Icon(
                  Icons.keyboard_arrow_down,
                  color: Colors.black54,
                ),
                collapsedIcon: const Icon(
                  Icons.keyboard_arrow_up,
                  color: Colors.black54,
                ),
                submitButton: Text('确定'),
                dropdownTitleTileTextStyle: const TextStyle(
                  fontSize: 14, color: Colors.black54),
                padding: const EdgeInsets.all(1),
                margin: const EdgeInsets.all(6),
                type: GFCheckboxType.basic,
                activeBgColor: Colors.green.withOpacity(0.5),
                inactiveBorderColor: Colors.grey.shade300,
                inactiveBgColor: Colors.grey.shade200,
              ),
            ),
          ],
        ),
      ),
    );
  }
}
